<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫雷游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .game-container {
            display: grid;
            grid-template-columns: repeat(10, 30px);
            gap: 2px;
            background-color: #ccc;
            padding: 5px;
        }
        .cell {
            width: 30px;
            height: 30px;
            background-color: #fff;
            border: 1px solid #ddd;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }
        .cell.revealed {
            background-color: #e0e0e0;
            cursor: default;
        }
        .cell.mine {
            background-color: red;
        }
        .cell.flagged::after {
            content: "🚩";
        }
        .cell.number::after {
            content: attr(data-number);
        }
        .controls {
            margin-top: 20px;
            text-align: center;
        }
        .reset-button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        .timer, .mine-count {
            font-size: 18px;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="game-container" id="game-container"></div>
    <div class="controls">
        <div class="mine-count">剩余地雷: <span id="mine-count">10</span></div>
        <button class="reset-button" id="reset-button">重新开始</button>
        <div class="timer">时间: <span id="timer">0</span>s</div>
    </div>

    <script>
        const gridSize = 10;
        const totalMines = 10;
        let board = [];
        let revealedCells = 0;
        let mineCount = totalMines;
        let timerId;
        let timeElapsed = 0;

        function createBoard() {
            const container = document.getElementById('game-container');
            container.innerHTML = '';
            board = Array.from({ length: gridSize }, () => Array(gridSize).fill(0));
            for (let i = 0; i < totalMines; i++) {
                let x, y;
                do {
                    x = Math.floor(Math.random() * gridSize);
                    y = Math.floor(Math.random() * gridSize);
                } while (board[x][y] === 'mine');
                board[x][y] = 'mine';
            }

            for (let x = 0; x < gridSize; x++) {
                for (let y = 0; y < gridSize; y++) {
                    if (board[x][y] !== 'mine') {
                        board[x][y] = countAdjacentMines(x, y);
                    }
                }
            }

            for (let x = 0; x < gridSize; x++) {
                for (let y = 0; y < gridSize; y++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    cell.dataset.x = x;
                    cell.dataset.y = y;
                    cell.addEventListener('click', () => revealCell(x, y));
                    cell.addEventListener('contextmenu', (e) => {
                        e.preventDefault();
                        toggleFlag(x, y);
                    });
                    container.appendChild(cell);
                }
            }
        }

        function countAdjacentMines(x, y) {
            let count = 0;
            for (let dx = -1; dx <= 1; dx++) {
                for (let dy = -1; dy <= 1; dy++) {
                    if (dx === 0 && dy === 0) continue;
                    const nx = x + dx;
                    const ny = y + dy;
                    if (nx >= 0 && nx < gridSize && ny >= 0 && ny < gridSize && board[nx][ny] === 'mine') {
                        count++;
                    }
                }
            }
            return count;
        }

        function revealCell(x, y) {
            if (gameOver || board[x][y] === 'flag') return;
            const cell = document.querySelector(`.cell[data-x="${x}"][data-y="${y}"]`);
            if (!cell) return;

            if (board[x][y] === 'mine') {
                gameOver = true;
                showAllMines();
                alert('你踩到地雷了！游戏结束！');
                clearInterval(timerId);
                return;
            }

            cell.classList.add('revealed');
            if (board[x][y] > 0) {
                cell.classList.add('number');
                cell.setAttribute('data-number', board[x][y]);
            } else {
                floodFill(x, y);
            }

            revealedCells++;
            if (revealedCells === gridSize * gridSize - totalMines) {
                gameOver = true;
                clearInterval(timerId);
                alert('恭喜你，找到了所有非地雷的格子！');
            }
        }

        function floodFill(x, y) {
            const stack = [[x, y]];
            while (stack.length > 0) {
                const [cx, cy] = stack.pop();
                if (board[cx][cy] !== 0 || document.querySelector(`.cell[data-x="${cx}"][data-y="${cy}"].revealed`)) continue;
                const cell = document.querySelector(`.cell[data-x="${cx}"][data-y="${cy}"]`);
                cell.classList.add('revealed');
                for (let dx = -1; dx <= 1; dx++) {
                    for (let dy = -1; dy <= 1; dy++) {
                        if (dx === 0 && dy === 0) continue;
                        const nx = cx + dx;
                        const ny = cy + dy;
                        if (nx >= 0 && nx < gridSize && ny >= 0 && ny < gridSize && !document.querySelector(`.cell[data-x="${nx}"][data-y="${ny}"].revealed`)) {
                            const adjacentCell = document.querySelector(`.cell[data-x="${nx}"][data-y="${ny}"]`);
                            if (board[nx][ny] === 0) {
                                stack.push([nx, ny]);
                            } else {
                                adjacentCell.classList.add('revealed');
                                if (board[nx][ny] > 0) {
                                    adjacentCell.classList.add('number');
                                    adjacentCell.setAttribute('data-number', board[nx][ny]);
                                }
                            }
                        }
                    }
                }
            }
        }

        function toggleFlag(x, y) {
            if (gameOver || document.querySelector(`.cell[data-x="${x}"][data-y="${y}"].revealed`)) return;
            const cell = document.querySelector(`.cell[data-x="${x}"][data-y="${y}"]`);
            if (cell.classList.contains('flagged')) {
                cell.classList.remove('flagged');
                mineCount++;
            } else {
                cell.classList.add('flagged');
                mineCount--;
            }
            document.getElementById('mine-count').textContent = mineCount;
        }

        function showAllMines() {
            for (let x = 0; x < gridSize; x++) {
                for (let y = 0; y < gridSize; y++) {
                    if (board[x][y] === 'mine') {
                        const cell = document.querySelector(`.cell[data-x="${x}"][data-y="${y}"]`);
                        if (!cell.classList.contains('flagged')) {
                            cell.classList.add('mine');
                        }
                    }
                }
            }
        }

        function startTimer() {
            timeElapsed = 0;
            timerId = setInterval(() => {
                timeElapsed++;
                document.getElementById('timer').textContent = timeElapsed;
            }, 1000);
        }

        function resetGame() {
            clearInterval(timerId);
            gameOver = false;
            revealedCells = 0;
            mineCount = totalMines;
            document.getElementById('mine-count').textContent = mineCount;
            document.getElementById('timer').textContent = 0;
            createBoard();
            startTimer();
        }

        let gameOver = false;
        createBoard();
        startTimer();
        document.getElementById('reset-button').addEventListener('click', resetGame);
    </script>
</body>
</html>